<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>指定加油站</title>
    {include file="include/top"}
</head>
<body>

<div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-app-form-tags"
     style="padding: 20px 0 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label">权限</label>
        <div class="layui-input-inline">
            <div class="layui-btn-container">
<!--                <button type="button" class="layui-btn" lay-demotransferactive="getData">获取右侧数据</button>-->
                <button type="button" class="layui-btn" lay-demotransferactive="reload">全部清空</button>
            </div>

            <div id="selectService" class="demo-transfer"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline">
            说明：如果已选加油站为空 表示可读取所有
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">对应油站</label>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn layui-btn-normal" id="gasList">点此查看</button> 查看当前已选加油站标签对应油站列表
        </div>
    </div>
    <input name="inGasTips" type="hidden" value="{$user.inGasTips?json_encode($user.inGasTips):''}">
</div>

{include file="include/js"}
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form','transfer'], function () {
        var $ = layui.$;
        var form = layui.form;
        var transfer = layui.transfer,util = layui.util;
        function getServiceIDS(){
            var getData = transfer.getData('key123'); //获取右侧数据
            console.log(getData)
            $("input[name='inGasTips']").val(JSON.stringify(getData))
        }
        $(function (){
            getGas()
        })
        $("#gasList").click(function (){
            var tipsJson = $("input[name='inGasTips']").val()
            tipsJson = JSON.parse(tipsJson);
            var namesStr = tipsJson.map(item => item.value).join(',');
            layer.open({
                type: 2
                ,title: '标签油站'
                ,content: 'gasTips?tips='+namesStr
                ,btn: ['确定']
                ,area: ['100%', '80%']
            });
        })
        function getGas(){
            $.post("getTips?type=gas",function (re){
                if(re.code==0){
                    //实例调用
                    transfer.render({
                        elem: '#selectService'
                        ,data: re.data
                        ,id: 'key123' //定义唯一索引
                        ,showSearch: true
                        ,title: ['可选加油站标签', '已选加油站标签']
                        ,width:"40%"
                        ,onchange:function (){
                            getServiceIDS()
                        }
                    })
                    {if strlen($user.inGasTips)>2}
                    transfer.reload('key123', {
                        value: {$user.inGasTips | raw}
                    })
                    {/if}
                        setTimeout(()=>{
                            getServiceIDS()
                        },1000)
                }else{
                    layer.msg("初始化加油站错误")
                }
            })
        }


        //批量办法定事件
        util.event('lay-demoTransferActive', {
            getData: function(othis){
                var getData = transfer.getData('key123'); //获取右侧数据
                layer.alert(JSON.stringify(getData));
            }
            ,reload:function(){
                //实例重载
                transfer.reload('key123', {
                   value: []
                })
                getServiceIDS()
            }
        });
    });
</script>
</body>
</html>